// 接口地址：http://jx.xuzhixiang.top/ap/api/detail.php
// 接口请求方式：get
// 接口参数：
// id  商品的id
// 使用方式
// 获取id为1的商品的详情
// http://jx.xuzhixiang.top/ap/api/detail.php?id=1
// 服务器返回json数据



// 查询用户购物车中的商品 接口

// 接口地址：http://jx.xuzhixiang.top/ap/api/cart-list.php
// 接口请求方式：get
// 接口参数：
//      id  用户id

// 使用方式
//      获取id为1的用户的购物车
//      http://jx.xuzhixiang.top/ap/api/cart-list.php?id=1

// 服务器返回json数据



// 0:
// id: "64426"
// pdesc: "新品上线，赶快来试试吧！"
// pid: "382015"
// pimg: "http://p0.jmstatic.com/product/005/210/5210500_std/5210500_dx_1000_400.jpg"
// pname: "【限时满2件49元3件69元】泰国乳胶无钢圈聚拢无痕背心蕾丝美背文胸"
// pnum: "25"
// pprice: "88.00"
// uid: "45158"

function show() {
    let url = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
    let id = localStorage.getItem("uid");
    // console.log("uid");
    axios.get(url, {
        params: {
            id
        }
    }).then(res => {
        console.log(res);
        let arr = res.data.data;
        let html = '';

        arr.forEach(obj => {
            html += ` <ul class="car_item  car_item_ufo"   data_id="${obj.pid}">
            <li class="car_item_one">
                <input type="checkbox"  class="car_dx" checked="">
             <img src="${obj.pimg}" class="car_item_img"  alt="">
                <p>${obj.pname}</p>
            </li>
            <li>
                <p class="car_item_price">${obj.pprice}</p>
            </li>
            <li>
                <div class="car_item_num">
                <span class="minus">-</span>
                <input type="text" value="${obj.pnum}" class="perznum">
                <span class="plus">+</span>
                </div>
            </li>
            <li> <p class="car_item_xj">${obj.pnum*obj.pprice}</p></li>
            <li>
                <p class="car_item_del">删除</p>
            </li>
        </ul>`
        })

        let list = document.querySelector('.car_item');
        list.innerHTML = html;
        let hhh=document.getElementById("hhh")
        let car_item_ufo = $(".car_item_ufo").get()
        let checkAll = $(".group_show_top1") //取到两个全选框
        // console.log(checkAll)
        // let carli = $(".car_item_one") //获取所有的li
        let dx = $(".car_dx") //获取所有的单选框
        let perprice = $(".car_item_price") //获取所有的单价
        let minus = $(".minus") //获取减号
        // console.log(minus)
        let perznum = $(".perznum") //获取单个商品的购买总数框
        let plus = $(".plus") //获取加号
        let xj = $(".car_item_xj") //获取单个商品总价框
        console.log(xj)
        let del_btn = $(".car_item_del") //获取删除按钮
        let xzspnum = $(".xzspnum") //获取共选中商品的文本框
        let zj = $(".zj") //获取所有商品总价框
        let js = $(".item_js") //获取结算按钮
        xzspnum.text($(".car_dx:checked").length)
        getTotalPrice()
        checkAll.eq(0).click(function () {
            dx.prop("checked", checkAll.eq(0).prop("checked"))
            checkAll.eq(1).prop("checked", dx.eq(0).prop("checked"))
            //记录单选框选中的个数输出到文本
            if (checkAll.eq(0).prop("checked")) {
                xzspnum.text($(".car_dx:checked").length)
                // console.log(xzspnum.text(dx.length))
                getTotalPrice()
            } else {
                xzspnum.text(0);
               
                // getTotalPrice()
            }
            // getTotalPrice()
        })
        //第二个全选框和第一个全选框同步的操作
        checkAll.eq(1).click(function () {
            dx.prop("checked", checkAll.eq(1).prop("checked"))
            checkAll.eq(0).prop("checked", dx.eq(0).prop("checked"))
            //记录单选框选中的个数输出到文本
            if (checkAll.eq(1).prop("checked")) {
                xzspnum.text(dx.length);
            } else {
                xzspnum.text(0);
            }
            // getTotalPrice()
        })

        //反选 
        /*当选中商品的数量的状态 等于 购物车单选框的数量时 全选按钮选中 */

        dx.click(function () {
            if ($(".car_dx:checked").length === dx.length) {
                checkAll.prop('checked', true);
                // getTotalPrice()
            } else {
                checkAll.prop('checked', false)
                // getTotalPrice()
            }
            xzspnum.text($(".car_dx:checked").length)
            // console.log($(".car_dx:checked").length)
            getTotalPrice()
        })

        //数量的加减
        //减法
        for (let i = 0; i < minus.length; i++) {
            minus[i].onclick = () => {
                if (perznum[i].value <= 1) {
                    perznum[i].value == 1
                } else {
                    perznum[i].value--
                }
                getTotalPrice()
                updateData(i)
            }
        }
        //加法
        for (let i = 0; i < plus.length; i++) {
            plus[i].onclick = () => {
                perznum[i].value++
                xj[i].innerText = perprice[i].innerText * perznum[i].value;
                updateData(i)
                getTotalPrice()
                console.log($(".dk"))
            }

        }
        //数量文本框的变化 修改数量文本框
        for (let i = 0; i < perznum.length; i++) {
            perznum[i].onchange = () => {
                // console.log(perznum[i])

                if (perznum[i].value <= 0) {
                    perznum[i].value = 1;

                }
                updateData(i)
                getTotalPrice()

            }
        }

        //删除
        for (let i = 0; i < $(".car_item_del").length; i++) {
            // console.log(del_btn.length)
            // console.log(i)
            $(".car_item_del").eq(i).click(function() {
                console.log($(".car_item_del").get()[i])
                //接口删除购物车商品
                let pid = car_item_ufo[i].getAttribute("data_id")

                // dx[i].checked = false;
                // console.log(car_item_ufo[i].parentNode);     
                hhh.removeChild(car_item_ufo[i]);
                delData(pid)
                getTotalPrice()
                //  console.log(dx.length)
                xzspnum.text($(".car_dx:checked").length)
                if ($(".car_dx").length == $(".car_dx:checked").length) {
                    $(".group_show_top1").prop("checked", true);
                }

                if ($(".car_dx:checked").length == 0) {
                    console.log("a")
                    checkAll[0].checked = false
                    checkAll[1].checked = false

                    $(".zj").text(0)
                }
               
            })
        }
        /* 接口地址：http://jx.xuzhixiang.top/ap/api/cart-update-num.php
        接口请求方式：get
        接口参数：
             uid  用户id
             pid  商品id
             pnum  要添加的商品数量
        
        使用方式
        
             http://jx.xuzhixiang.top/ap/api/cart-update-num.php?uid=1&pid=1&pnum=1
        
        服务器返回json数据  */



        function updateData(i) {
            //   console.log(xj[i])
            //   console.log(perprice[i])
            //   console.log(perznum[i])
            let url = "http://jx.xuzhixiang.top/ap/api/cart-update-num.php"

            let pid = car_item_ufo[i].getAttribute("data_id")
            // console.log(pid)
            let uid = localStorage.getItem("uid");
            let pnum = perznum[i].value
            console.log(uid, pnum)
            axios.get(url, {
                params: {

                    uid,
                    pid,
                    pnum
                }
            }).then(data => {
                console.log(data)
            })
        }




        //计算总价
        function getTotalPrice() {
            // console.log("b")
            let ceo = 0;

            //  console.log(dk.get())
            // console.log($(".car_dx"))
            for (let i = 0; i < $(".car_dx").get().length; i++) {
                // console.log(i)
                if ($(".car_dx").eq(i).prop("checked")) {
                    // console.log(i)
                    // console.log(perTotalPrice.eq(i).text());
                    ceo += parseInt($(".car_item_xj").eq(i).text());
                    // console.log(ceo)
                    $(".zj").text(ceo);
                }
            }

        }






        // 删除用户购物车中的商品 接口

        // 接口地址：http://jx.xuzhixiang.top/ap/api/cart-delete.php
        // 接口请求方式：get
        // 接口参数：
        //      uid  用户id
        //      pid  商品id
        
        // 使用方式
        //      删除用户1中的 id为1商品
        //      http://jx.xuzhixiang.top/ap/api/cart-delete.php?uid=1&pid=1
        
        // 服务器返回json数据
        //删除
        function delData(pid) {
            let uid = localStorage.getItem("uid")
            let url = "http://jx.xuzhixiang.top/ap/api/cart-delete.php"
            
            axios.get(url, {
                params: {
                    uid,
                    pid
                }


            }).then(data => {
                // console.log(data)
            })
           
        }
    })


}
show()